<template>
  <div class="box">
      <!-- 顶部 -->
      <div class="header">
        <span>西安</span><div class="three">请输入搜索关键字</div><span @click="toLogin()">登录</span>
      </div>
      <!-- 主要区域 -->
      <div class="main" @scroll="scrollMe" ref="main">
        <!-- 轮播组件 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.imgurl" />
        </van-swipe-item> 
        </van-swipe>
        <div class="top10">
          <van-grid :column-num="5" :icon-size="35" :border="false">
        <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>
        </div>
        <div class="top20">
          <!-- 秒杀倒计时组件 -->
          <van-count-down :time="time">
            <template #default="timeData"><span class="miao">京东秒杀</span>
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span><span class="bao">爆款轮翻炒</span>
            </template>
          </van-count-down>
          <!-- 秒杀列表渲染 -->
          <ul class="seckill">                                  
            <li v-for="item in seckilllist" :key="item.proid" @click="jumpTo(item.proid)">
            <van-image width="60" height="60" :src="item.img1" />
            <p class="active">￥{{item.originprice}}</p>
            </li>
          </ul>
        </div>
        <!-- 商品列表渲染 -->
        <div class="top10">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <!-- 两套布局，点击那个就是那个 -->
          <ul :class="isShow? 'prolist1':'prolist2'">
            <li v-for="item in proList" :key="item.proid">
              <img width="100%" :src="item.img1" alt="">
              <div class="lie"><h4>{{item.proname}}</h4>
              <span>￥{{item.originprice}}</span>
              <span class="di">京东物流</span>
            </div>
            </li>
            <!-- 两个布局切换 -->
            <div class="toggle" @click="isShow=!isShow">
              <van-icon name="apps-o" v-if="isShow" />
              <van-icon name="bars" v-else />
            </div>
          </ul>
        </van-list>
        </div>
      </van-pull-refresh>
      <!-- 返回顶部 -->
      <div class="top" v-if="scrollTop>1000" @click="backTop">
        <van-icon name="back-top" />
      </div>
      </div>
    </div>
</template>

<script>
// 导入api下的封装，用谁导入谁 ,用{}是导入的多个
import {getBannerList,getnavList,getSeckillList,getProList} from '../api/home'
import Vue from 'vue';
import { Swipe, SwipeItem,Grid, GridItem, CountDown,Image as VanImage,Icon ,List ,PullRefresh  } from 'vant';
// vant移动端组件引入的使用
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon );
Vue.use(List);
Vue.use(PullRefresh );
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      navList: [],
      bannerList:[],
      time:860*60*60*1000,
      seckilllist:[],
      proList:[],
      isShow:true,
      loading: false,
      finished: false,
      count:2,   //让当前显示的数据是第二页，下拉刷新的时候显示第一页
      isLoading: false,
      scrollTop:0,
      timer:null,
    };
  },
  methods: {
    // 上拉加载更多
    onLoad(){
      this.loading = true;
      setTimeout(()=>{
     getProList({count:this.count,limitNum:12}).then(data =>{
        console.log(data.data.data);
        this.loading = false;
        if(data.data.data.length == 0){
          this.finished = true;
        }else{
          this.proList = [...this.proList,...data.data.data];//this.prolist = 原有的数据 + 新加载出来的数据
          this.count++;
        }
      });     
    },1000)
    },
    // 跳转到详情页
    jumpTo(proid){
      this.$router.push("/detail/"+proid)
    },
    // 加载的事第一页，下拉刷新让显示第一页   下拉刷新页面
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then(data =>{
          // 加载的第一页
          this.proList = data.data.data;
          this.count = 2;
        });
      }, 1000);
    },
    // main的高度 scrollTop=0
    scrollMe(){
      this.scrollTop = this.$refs.main.scrollTop;
    },
    // 点击返回顶部
    backTop(){
      this.timer = setInterval(()=>{
        if(this.$refs.main.scrollTop <= 0){
          clearInterval(this.timer)
        }
        this.$refs.main.scrollTop -= 100;
      },15)
    },
    // 跳转到登录页
    toLogin(){
      this.$router.push("/login")
    }
  },
  created () {
    // mock数据请求
    getBannerList().then(res=>{
      this.bannerList = res.data;
    });
    //发送请求
    getnavList().then(res=>{
      this.navList = res.data;
    });
    // 秒杀列表数据请求
    getSeckillList().then((res)=>{
      this.seckilllist = res.data.data
    });
    // 获取商品列表 两套布局
    getProList({count:this.count,limitNum:12}).then(data=>{
      // console.log(data.data.data);
      this.proList = data.data.data
    })
  }
} 
</script>
<style scoped>
/* 轮播图样式 */
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .box .header span{
    color: white;
    font-size: .16rem;
  }
  .box .header .three{
    color: gray;
    width: 2.66rem;
    height: .29rem;
    background-color: white;
    border-radius: 1.25rem;
    line-height: .33rem;
    text-align: center;
    font-size: .14rem;
    margin: 0 .08rem;
  }
  .my-swipe{
    height: 1.8rem;
  }
  .my-swipe img{
    height: 100%;
  }
  .top10{
    margin-top: .1rem;
    border-radius: .1rem;
    margin: .1rem;
  }
  .top10 ul li{
    padding: .1rem;
    border-radius: .08rem;
  }
  .top10 ul li .lie h4{
    font-size: .14rem;
    margin: .1rem 0;
  }
  .top10 ul li .lie span{
    color: red;
    margin-right: .22rem;
    font-size: .14rem;
  }
  .top20{
    border-radius: .1rem;
    margin: .1rem;
    background-color: white;
    padding: .1rem ;
  }
  .top20 .miao{
    margin: 0 .15rem;
  }
  .top20 .bao{
    color: red;
    margin-left: .6rem;
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  .seckill{
    display: flex;
    justify-content: space-between;
    padding-top: .1rem;
    display: flex;
    overflow: auto;
  }
  .seckill li{
    margin:0 .1rem;
  }
  .active{
    color: red;
  }
  /* ::v-deep .van-grid-item__content{
    background-color: rgb(253, 203, 211);
  } */
  .prolist1 li{
    width: 48.5%;
    /* border: 1px solid red; */
    background-color: white;
    margin-bottom: .12rem;
    /* border-radius: .15rem; */
  }
  .prolist1{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .prolist2 li{
    display: flex;
  }
  .prolist2 li img {
    width: 30%;
    height: .8rem;
  }
  .prolist2 li div{
    flex: 1;
  }
  .toggle{
    width: .3rem;
    height: .3rem;
    border: 1px solid blue;
    border-radius: 50%;
    position: fixed;
    bottom: .55rem;
    right: .15rem;
    text-align: center;
    line-height: .3rem;
    color: blue;
  }
  .top{
    width: .3rem;
    height: .3rem;
    border: 1px solid blue;
    border-radius: 50%;
    position: fixed;
    bottom: 1rem;
    right: 0.15rem;
    text-align: center;
    line-height: .3rem;
    color: blue;
  }
  .box .header{
    justify-content: center;
    align-items: center;
    display: flex;
  }
</style>
  